import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/base/layout_params/decoration_page.dart';
import 'package:flutter_demo/pages/base/layout_params/padding_page.dart';
import 'package:flutter_demo/pages/base/layout_params/size_page.dart';
import 'package:flutter_demo/pages/base/layout_params/transform_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../conf/m3.dart';
import '../../../widgets/app_widgets.dart';

class ContainerPage extends PageWithTitle {
  const ContainerPage() : super("容器组件(Container)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("容器组件，因为Flutter的各种布局参数效果都由独立的组件实现，使用起来嵌套层数太"
          "多，容器组件基于各种布局参数组件进行封装，可以实现类似View.LayoutParams、"
          "Compose.Modifier的效果，一次性设置布局参数，减少代码嵌套层数"),
      _Example(),
      AppSpacer.mini,
      UlItem("Container"),
      BodyText("虽然container因为集齐了众多布局参数组件，功能丰富，但若只需要设置一项属性建"
          "议优先使用对应的Box组件"),
      LabelText("- margin padding，外内边距设置，参考"),
      PageLink(PaddingPage()),
      LabelText("- width height，尺寸设置，参考SizedBox"),
      LabelText("- constraints，尺寸约束设置，参考ConstrainedBox"),
      PageLink(SizePage()),
      LabelText("- color，背景色设置，他与decoration同时只能存在一个，如果只需要设置颜色则"
          "推荐使用此参数，参考ColoredBox"),
      LabelText("- decoration foregroundDecoration，背景、前景装饰设置，参考DecoratedBox"),
      PageLink(DecorationPage()),
      LabelText("- clipBehavior，根据decoration裁剪子组件"),
      LabelText("- transform，变换效果，参考"),
      PageLink(TransformPage()),
      LabelText("- transformAlignment，变换中心，一般是用于旋转、缩放"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          margin: const EdgeInsetsDirectional.all(10),
          width: double.infinity,
          height: 100,
          constraints: const BoxConstraints(maxWidth: 120),
          // color: const Color(0x80FF0000) ,
          decoration: const BoxDecoration(
            color:  Color(0x80FF0000),
            borderRadius: M3.connerRadiusMedium,
          ),
          padding: const EdgeInsetsDirectional.only(start: 10),
          foregroundDecoration: const BoxDecoration(
            color: Color(0x80808080),
            borderRadius: M3.connerRadiusMedium,
          ),
          clipBehavior: Clip.antiAlias,
          transform: Transform.rotate(angle: pi/2).transform,
          transformAlignment: AlignmentDirectional.center,
          child: const ColoredBox(color: Color(0x8000FF00),),
        )
      ],
    );
  }
}
